{% extends 'front/index.html' %}

{% block content %}
    <!-- banner -->
    <div class="banner banner2">
        <div class="container">
            <h2>Top Selling <span>Musical Instrument</span> Flat <i>25% Discount</i></h2>
        </div>
    </div>
    <!-- breadcrumbs -->
    <div class="breadcrumb_dress">
        <div class="container">
            <ul>
                <li><a href="{% url 'index_front' %}"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home</a>
                    <i>/</i></li>
                <li>Products1</li>
            </ul>
        </div>
    </div>
    <!-- //breadcrumbs -->
    <!-- mobiles -->
    <div class="mobiles">
        <div class="container">
            <div class="w3ls_mobiles_grids">
                <div class="col-md-4 w3ls_mobiles_grid_left">
                    <div class="w3ls_mobiles_grid_left_grid">
                        <h3>Categories</h3>
                        <div class="w3ls_mobiles_grid_left_grid_sub">
                            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                                <div class="panel panel-default">
                                    <div class="panel-heading" role="tab" id="headingOne">
                                        <h4 class="panel-title asd">
                                            <a class="pa_italic" role="button" data-toggle="collapse"
                                               data-parent="#accordion" href="#collapseOne" aria-expanded="true"
                                               aria-controls="collapseOne">
                                                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span><i
                                                    class="glyphicon glyphicon-minus" aria-hidden="true"></i>New
                                                Arrivals
                                            </a>
                                        </h4>
                                    </div>
                                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel"
                                         aria-labelledby="headingOne">
                                        <div class="panel-body panel_text">
                                            <ul>
                                                <li><a href="#">Guitar</a></li>
                                                <li><a href="#">Violin</a></li>
                                                <li><a href="#">Piano</a></li>
                                                <li><a href="#">Saxophone</a></li>
                                                <li><a href="#">Drum</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel panel-default">
                                    <div class="panel-heading" role="tab" id="headingTwo">
                                        <h4 class="panel-title asd">
                                            <a class="pa_italic collapsed" role="button" data-toggle="collapse"
                                               data-parent="#accordion" href="#collapseTwo" aria-expanded="false"
                                               aria-controls="collapseTwo">
                                                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span><i
                                                    class="glyphicon glyphicon-minus" aria-hidden="true"></i>Brands
                                            </a>
                                        </h4>
                                    </div>
                                    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel"
                                         aria-labelledby="headingTwo">
                                        <div class="panel-body panel_text">
                                            <ul>
                                                <li><a href="#">YAMAHA</a></li>
                                                <li><a href="#">HAILUN</a></li>
                                                <li><a href="#">ROLAND</a></li>
                                                <li><a href="#">星海</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <ul class="panel_bottom">
                                <li><a href="products.html">Summer Store</a></li>
                                <li><a href="products.html">Today's Deals</a></li>
                                <li><a href="products.html">Latest Watches</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="w3ls_mobiles_grid_left_grid">
                        <h3>Color</h3>
                        <div class="w3ls_mobiles_grid_left_grid_sub">
                            <div class="ecommerce_color">
                                <ul>
                                    <li><a href="#"><i></i> Red </a></li>
                                    <li><a href="#"><i></i> Brown </a></li>
                                    <li><a href="#"><i></i> Purple </a></li>
                                    <li><a href="#"><i></i> Gold </a></li>
                                    <li><a href="#"><i></i> Black </a></li>
                                    <li><a href="#"><i></i> Blue </a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="w3ls_mobiles_grid_left_grid">
                        <h3>Price</h3>
                        <div class="w3ls_mobiles_grid_left_grid_sub">
                            <div class="ecommerce_color ecommerce_size">
                                <ul>
                                    <li><a href="#">Below $ 100</a></li>
                                    <li><a href="#">$ 100-500</a></li>
                                    <li><a href="#">$ 1k-10k</a></li>
                                    <li><a href="#">$ 10k-20k</a></li>
                                    <li><a href="#">$ Above 20k</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-8 w3ls_mobiles_grid_right">
                    <div class="col-md-6 w3ls_mobiles_grid_right_left">
                        <div class="w3ls_mobiles_grid_right_grid1">
                            <img src="/static/front/images/products/5.jpg" alt=" " class="img-responsive"
                                 style="height: 242.05px;width: 365px;"/>
                            <div class="w3ls_mobiles_grid_right_grid1_pos1">
                                <h3>Attractive<span> New</span> Piano </h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 w3ls_mobiles_grid_right_left">
                        <div class="w3ls_mobiles_grid_right_grid1">
                            <img src="/static/front/images/products/13.jpg" alt=" " class="img-responsive"
                                 style="height: 242.05px;width: 365px;"/>
                            <div class="w3ls_mobiles_grid_right_grid1_pos">
                                <h3>Best Prices On<span> Violin </span>Upto 50% Off</h3>
                            </div>
                        </div>
                    </div>
                    <div class="clearfix"></div>

                    <div class="w3ls_mobiles_grid_right_grid2">
                        <div class="w3ls_mobiles_grid_right_grid2_left">
                            <h3>Showing Results: 0-1</h3>
                        </div>
                        <div class="clearfix"></div>
                    </div>

                    <div class="w3ls_mobiles_grid_right_grid3">
                        {% for p in contentPage %}
                            <div class="col-md-4 agileinfo_new_products_grid agileinfo_new_products_grid_mobiles"
                                 style="margin-bottom: 60px">
                                <div class="agile_ecommerce_tab_left mobiles_grid">
                                    <div class="hs-wrapper hs-wrapper2">
                                        <img src="{{ p.picture }}" alt=" " class="img-responsive"/>
                                        <img src="{{ p.picture }}" alt=" " class="img-responsive"/>
                                        <img src="{{ p.picture }}" alt=" " class="img-responsive"/>
                                        <img src="{{ p.picture }}" alt=" " class="img-responsive"/>
                                        <img src="{{ p.picture }}" alt=" " class="img-responsive"/>
                                        <img src="{{ p.picture }}" alt=" " class="img-responsive"/>
                                        <div class="w3_hs_bottom w3_hs_bottom_sub1">
                                            <ul>
                                                <li>
                                                    <a href="#" data-toggle="modal"
                                                       data-target="#myModal{{ p.id }}"><span
                                                            class="glyphicon glyphicon-eye-open"
                                                            aria-hidden="true"></span></a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <h5><a href="{% url 'single_product' %}?id={{ p.id }}">{{ p.name }}</a></h5>
                                    <div class="simpleCart_shelfItem">
                                        <p><span>${{ p.old_price }}</span> <i class="item_price">${{ p.new_price }}</i>
                                        </p>
                                        <h6>音色试听</h6>
                                            <audio id="music1" controls style="width:175px;height:40px">
                                            Your browser does not support the audio tag.
                                                <source src="/static/front/music/风之诗.m4a" >
                                            </audio>
                                        <form action="#" method="post">
                                            <input type="hidden" name="cmd" value="_cart"/>
                                            <input type="hidden" name="add" value="1"/>
                                            <input type="hidden" name="w3ls_item" value="{{ p.name }}"/>
                                            <input type="hidden" name="amount" value="{{ p.new_price }}"/>
                                            <button type="submit" class="w3ls-cart">Add to cart</button>
                                        </form>
                                    </div>
                                    <div class="mobiles_grid_pos">
                                        <h6>New</h6>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                        <div class="clearfix"></div>

                        <!-- 分页部分 -->
                        <div class="pull-left">
                            <label style="padding-top: 15px;font-size: 16px"> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                                共 &nbsp {{ number }} &nbsp条
                            </label>
                        </div>


                        <div class="pull-right">
                            <ul class="pagination pagination-lg">
                                {% if contentPage.has_previous %}
                                    <li>
                                        <a href="{% url 'products_show' %}?page={{ contentPage.previous_page_number }}">
                                            < </a></li>
                                {% endif %}

                                {# 页码号为1永远显示 #}
                                {% if first_page == contentPage.number %}
                                    <li class="active"><a href="{% url 'products_show' %}?page=1">1</a></li>
                                {% else %}
                                    <li><a href="{% url 'products_show' %}?page=1">1</a></li>
                                {% endif %}

                                {% if pages_first > 2 %}
                                    <li><a href="#">...</a></li>
                                {% endif %}

                                {% for pg in pages %}
                                    {% if contentPage.number == pg %}
                                        <li class="active"><a
                                                href="{% url 'products_show' %}?page={{ pg }}">{{ pg }}</a>
                                        </li>
                                    {% else %}
                                        <li><a href="{% url 'products_show' %}?page={{ pg }}">{{ pg }}</a></li>
                                    {% endif %}
                                {% endfor %}

                                {#pages最后一个值+1的值小于最大页码号，说明有页码号需要被省略号替换#}
                                {% if pages_last < last_page %}
                                    <li><a href="#">...</a></li>
                                {% endif %}

                                {# 永远显示最后一页的页码号，如果只有一页则前面已经显示了1就不用再显示了 #}
                                {% if last_page != 1 %}
                                    {% if contentPage.number == last_page %}
                                        <li class="active"><a
                                                href="{% url 'products_show' %}?page={{ last_page }}">{{ last_page }}</a>
                                        </li>
                                    {% else %}
                                        <li><a href="{% url 'products_show' %}?page={{ last_page }}">{{ last_page }}</a>
                                        </li>
                                    {% endif %}
                                {% endif %}

                                {% if contentPage.has_next %}
                                    <li>
                                    <a href="{% url 'products_show' %}?page={{ contentPage.next_page_number }}"> > </a>
                                {% endif %}
                            </ul>
                        </div>

                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>

    {% for p in contentPage %}
        <div class="modal video-modal fade" id="myModal{{ p.id }}" tabindex="-1" role="dialog"
             aria-labelledby="myModal{{ p.id }}">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                    </div>
                    <section>
                        <div class="modal-body">
                            <div class="col-md-5 modal_body_left">
                                <img src="{{ p.picture }}" alt=" " class="img-responsive"/>
                            </div>
                            <div class="col-md-7 modal_body_right">
                                <h4>{{ p.name }}</h4>
                                <p>{{ p.introduction }}</p>
                                <h5>库存：{{ p.stock }}</h5>
                                <div class="clearfix"></div>
                                <div class="modal_body_right_cart simpleCart_shelfItem">
                                    <p><span>${{ p.old_price }}</span> <i class="item_price">${{ p.new_price }}</i></p>
                                    <form action="#" method="post">
                                        <input type="hidden" name="cmd" value="_cart"/>
                                        <input type="hidden" name="add" value="1"/>
                                        <input type="hidden" name="w3ls_item" value="{{ p.name }}"/>
                                        <input type="hidden" name="amount" value="{{ p.new_price }}"/>
                                        <button type="submit" class="w3ls-cart">Add to cart</button>
                                    </form>
                                </div>
                                <h5>Color</h5>
                                <div class="color-quality">
                                    <ul>
                                        <li><a href="#" class="{{ p.color }}"><span></span></a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
    {% endfor %}


    <!-- Related Products -->
    <link href="/static/front/css/style.css" rel="stylesheet" type="text/css" media="all"/>
    <div class="w3l_related_products">
        <div class="container">
            <h3>Related Products</h3>
            <ul id="flexiselDemo2">

                <li>
                    <div class="w3l_related_products_grid">
                        <div class="agile_ecommerce_tab_left mobiles_grid">
                            <div class="hs-wrapper hs-wrapper3">
                                <img src="/static/front/images/products/7.jpg" alt=" " class="img-responsive"/>
                                <img src="/static/front/images/products/8.jpg" alt=" " class="img-responsive"/>
                                <img src="/static/front/images/products/7.jpg" alt=" " class="img-responsive"/>
                                <img src="/static/front/images/products/8.jpg" alt=" " class="img-responsive"/>
                                <img src="/static/front/images/products/7.jpg" alt=" " class="img-responsive"/>
                                <img src="/static/front/images/products/8.jpg" alt=" " class="img-responsive"/>
                                <div class="w3_hs_bottom">
                                    <div class="flex_ecommerce">
                                        <a href="#" data-toggle="modal" data-target="#myModala"><span
                                                class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></a>
                                    </div>
                                </div>
                            </div>
                            <h5><a href="single.html">雅马哈fg800单板民谣吉他</a></h5>
                            <div class="simpleCart_shelfItem">
                                <p class="flexisel_ecommerce_cart"><span>$292.00</span> <i
                                        class="item_price">$288.00</i></p>
                                <form action="#" method="post">
                                    <input type="hidden" name="cmd" value="_cart">
                                    <input type="hidden" name="add" value="1">
                                    <input type="hidden" name="w3ls_item" value="雅马哈fg800单板民谣吉他">
                                    <input type="hidden" name="amount" value="288.00">
                                    <button type="submit" class="w3ls-cart">Add to cart</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </li>

                <li>
                    <div class="w3l_related_products_grid">
                        <div class="agile_ecommerce_tab_left mobiles_grid">
                            <div class="hs-wrapper hs-wrapper3">
                                <img src="/static/front/images/products/10.jpg" alt=" " class="img-responsive"/>
                                <img src="/static/front/images/products/10.jpg" alt=" " class="img-responsive"/>
                                <img src="/static/front/images/products/10.jpg" alt=" " class="img-responsive"/>
                                <img src="/static/front/images/products/10.jpg" alt=" " class="img-responsive"/>
                                <img src="/static/front/images/products/10.jpg" alt=" " class="img-responsive"/>
                                <img src="/static/front/images/products/10.jpg" alt=" " class="img-responsive"/>
                                <div class="w3_hs_bottom">
                                    <div class="flex_ecommerce">
                                        <a href="#" data-toggle="modal" data-target="#myModalb"><span
                                                class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></a>
                                    </div>
                                </div>
                            </div>
                            <h5><a href="single.html">YAS-200DR</a></h5>
                            <div class="simpleCart_shelfItem">
                                <p class="flexisel_ecommerce_cart"><span>$960</span> <i class="item_price">$920</i></p>
                                <form action="#" method="post">
                                    <input type="hidden" name="cmd" value="_cart"/>
                                    <input type="hidden" name="add" value="1"/>
                                    <input type="hidden" name="w3ls_item" value="YAS-200DR"/>
                                    <input type="hidden" name="amount" value="920.00"/>
                                    <button type="submit" class="w3ls-cart">Add to cart</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </li>

                <li>
                    <div class="w3l_related_products_grid">
                        <div class="agile_ecommerce_tab_left mobiles_grid">
                            <div class="hs-wrapper hs-wrapper3">
                                <img src="/static/front/images/products/12.jpg" alt=" " class="img-responsive"/>
                                <img src="/static/front/images/products/12.jpg" alt=" " class="img-responsive"/>
                                <img src="/static/front/images/products/12.jpg" alt=" " class="img-responsive"/>
                                <img src="/static/front/images/products/12.jpg" alt=" " class="img-responsive"/>
                                <img src="/static/front/images/products/12.jpg" alt=" " class="img-responsive"/>
                                <img src="/static/front/images/products/12.jpg" alt=" " class="img-responsive"/>
                                <div class="w3_hs_bottom">
                                    <div class="flex_ecommerce">
                                        <a href="#" data-toggle="modal" data-target="#myModalc"><span
                                                class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></a>
                                    </div>
                                </div>
                            </div>
                            <h5><a href="single.html">YSV-104</a></h5>
                            <div class="simpleCart_shelfItem">
                                <p class="flexisel_ecommerce_cart"><span>$650</span> <i class="item_price">$645</i></p>
                                <form action="#" method="post">
                                    <input type="hidden" name="cmd" value="_cart"/>
                                    <input type="hidden" name="add" value="1"/>
                                    <input type="hidden" name="w3ls_item" value="YSV-104"/>
                                    <input type="hidden" name="amount" value="645.00"/>
                                    <button type="submit" class="w3ls-cart">Add to cart</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </li>

            </ul>

            <script type="text/javascript">
                $(window).load(function () {
                    $("#flexiselDemo2").flexisel({
                        visibleItems: 4,
                        animationSpeed: 1000,
                        autoPlay: true,
                        autoPlaySpeed: 3000,
                        pauseOnHover: true,
                        enableResponsiveBreakpoints: true,
                        responsiveBreakpoints: {
                            portrait: {
                                changePoint: 568,
                                visibleItems: 1
                            },
                            landscape: {
                                changePoint: 667,
                                visibleItems: 2
                            },
                            tablet: {
                                changePoint: 768,
                                visibleItems: 3
                            }
                        }
                    });

                });
            </script>
            <script type="text/javascript" src="/static/front/js/jquery.flexisel.js"></script>
        </div>
    </div>
    <!-- //Related Products -->
{% endblock %}
